window.onload = function (e) {
    e = e || window.event;
    e.returnValue = false;



    //获取元素
    let center_ul = document.querySelector(".center_ul");
    let one = document.querySelector(".one");
    let two = document.querySelector(".two");
    let three = document.querySelector(".three");
    let four = document.querySelector(".four");
    let s_one = document.querySelector(".s_one");
    let s_two = document.querySelector(".s_two");
    let s_three = document.querySelector(".s_three");
    let s_four = document.querySelector(".s_four");
    let s_li = document.querySelectorAll(".center_small li");
    let center_small = document.querySelector(".center_small");
    let details_box = document.querySelector(".details_box");
    let even = document.querySelector(".even");
    let center_right = document.querySelector(".center_right");
    let information_top = document.querySelector(".information_top");
    let select_p = document.querySelector(".select_p");
    let select_li = document.querySelectorAll(".select_p ul li");
    let select_s = document.querySelector(".select_s");
    let infor_h1 = document.querySelector(".infor_h1");
    let price_span = document.querySelector(".price_span");
    let des_p = document.querySelector(".des_p");
    let col_span = document.querySelector(".col_span");
    let col_p = document.querySelector(".col_p");
    let car = document.querySelector(".car");
    let add_car = document.querySelector(".add_car");
    s_li = Array.from(s_li);



    //判断列表页的url是否有拼接id传到详情页 如果没有就跳回列表页
    let res = location.search.match(/\?id=(\d+)/);
    if (!res) {
        location.href = "../html/Ms.select.html";
        return;
    }

    //索引为1的就是正则中第一个圆括号匹配到的字符（判断跟第一个圆括号中匹配的值）拿到id值
    let id = res[1];

    //data拿到的是列表页中所存储在本地的列表页详情
    let data = JSON.parse(localStorage.getItem("Ms.datalist"));


    //循环拿到的数据进行一个过滤操作
    //当每次循环本地存储得到的id 等于正则匹配的id值
    let detailsID = data.filter((item) => {
        return item.id == id;
    })[0];
    let detailsURL = detailsID.url.replace("/", "");
    getdetailURL(detailsURL);


    let imgLength = detailsID.allImages.length;
    if (imgLength == 4 || imgLength > 4) {
        render1(detailsID);
        render(detailsID);
    } else if (imgLength == 3) {
        render1_2(detailsID);
        render_2(detailsID);
        center_small.removeChild(s_four.parentNode.parentNode);
        center_ul.removeChild(four.parentNode);
    } else {
        render1_3(detailsID);
        render_3(detailsID);
        center_small.removeChild(s_three.parentNode.parentNode);
        center_small.removeChild(s_four.parentNode.parentNode);
        center_ul.removeChild(three.parentNode);
        center_ul.removeChild(four.parentNode);
    }

    //排他思想
    s_li.forEach(function (item, index) {
        item.onclick = function () {
            scrollTo({
                top: index * innerHeight,
                behavior: "smooth"
            });

            for (var i = 0; i < s_li.length; i++) {
                s_li[i].classList.remove("border_even");
            }
            this.classList.add("border_even");
        }
    });

    select_li.forEach(function (item, index) {
        item.onmouseover = function () {
            for (var i = 0; i < select_li.length; i++) {
                select_li[i].classList.remove("select_even");
                select_li[i].onclick = function () {
                    select_s.innerHTML = select_li[index].innerText;
                    select_p.style.display = "none";
                }
            }
            this.classList.add("select_even");
        }
    })


    window.onscroll = function () {
        let index = Math.round(scrollY / innerHeight);
        for (var i = 0; i < s_li.length; i++) {
            s_li[i].classList.remove("border_even");
        }
        s_li[index].classList.add("border_even");

        let h = window.scrollY;
        if (imgLength == 3) {
            if (h > 1400) {
                center_small.style.bottom = "130px";
            } else {
                center_small.style.bottom = "20px";
            }
        } else if (imgLength == 4) {
            if (h > 2090) {
                center_small.style.bottom = "130px";
            } else {
                center_small.style.bottom = "20px";
            }
        }

    }

    details_box.onclick = function (e) {
        if (e.target.classList.contains("find")) {
            center_right.style.right = 0;
            even.style.display = 'block';
        }

        if (e.target.classList.contains("cancle")) {
            center_right.style.right = "-511px";
            even.style.display = 'none';
        }

        if (e.target.classList.contains("select_s")) {
            select_p.style.display = "block";
        }

        if (e.target.classList.contains("shoppingcar")) {
            let user = getCookie("login");
            if (!user) {
                localStorage.setItem("url", location.href);
                confirm("请先登录!");
                if (confirm) {
                    location.href = "../html/login.html";
                    return;
                }
            }
            car.style.right = 0;
            even.style.display = 'block';
        }

        if (e.target.classList.contains("quxiao")) {
            car.style.right = "-511px";
            even.style.display = 'none';
        }

    }

    let url = window.location.href;

    //接口请求
    async function getdetailURL(index) {
        let data = await pAjax({
            url: "/rest/default/V1/catalog/productDetailByUrl",
            data: `url=${index}`
        });
        data = JSON.parse(data).data;
        let goodsdetails = {
            userphone: getCookie("login"),
            goods_id: data.id,
            goods_name: data.name,
            goods_price: data.price.replace("¥", ""),
            goods_num: "1",
            goods_img: data.allImages[0].small_thumbnail,
            goods_color: data.attributes[0].values[0].label,
            goods_size: data.attributes[1].values[0].label,
            is_select: 0
        }
        // console.log(goodsdetails);
        render_select(data);
        add_car.onclick = function (e) {
            e = e || window.event;
            e.returnValue = false;
            let user = getCookie("login");
            if (!user) {
                localStorage.setItem("url", location.href);
                confirm("请先登录!");
                if (confirm) {
                    location.href = "../html/login.html";
                    return;
                }
            }
            let p = pAjax({
                url: "/api/addCar",
                type: "post",
                data: goodsdetails
            });
            p.then((res) => {
                res = JSON.parse(res);
                confirm(res.msg);
                if (confirm) {
                    location.replace(url);
                }
            });
        }
    }





    //大图片
    function render(data) {
        one.src = data.allImages[0].large;
        two.src = data.allImages[1].large;
        three.src = data.allImages[2].large;
        four.src = data.allImages[3].large;
    }

    function render_2(data) {
        one.src = data.allImages[0].large;
        two.src = data.allImages[1].large;
        three.src = data.allImages[2].large;
        four.src = " ";
    }

    function render_3(data) {
        one.src = data.allImages[0].large;
        two.src = data.allImages[1].large;
        three.src = " ";
        four.src = " ";
    }

    //小图片
    function render1(data) {
        s_one.src = data.allImages[0].small_thumbnail;
        s_two.src = data.allImages[1].small_thumbnail;
        s_three.src = data.allImages[2].small_thumbnail;
        s_four.src = data.allImages[3].small_thumbnail;
    }

    function render1_2(data) {
        s_one.src = data.allImages[0].small_thumbnail;
        s_two.src = data.allImages[1].small_thumbnail;
        s_three.src = data.allImages[2].small_thumbnail;
        s_four.src = " ";
    }

    function render1_3(data) {
        s_one.src = data.allImages[0].small_thumbnail;
        s_two.src = data.allImages[1].small_thumbnail;
        s_three.src = " ";
        s_four.src = " ";
    }

    //右上角信息框
    function render_select(data) {
        infor_h1.innerHTML = data.name;
        price_span.innerHTML = data.price;
        des_p.innerHTML = data.description;
        col_span.innerHTML = data.attributes[0].values[0].default_label;
        col_p.style.background = data.attributes[0].values[0].backgroundColor;
    }



}